<template>
	<div id="merchant">
		<MerchantHeader v-if="Object.keys($store.state.merchantInfo).length" :merchantInfo="$store.state.merchantInfo"/>
		<div class="tabs">
			<div class="tabitem">
				<router-link :class="{cur:active=='goods'}" to="/merchant/goods">点餐</router-link>
			</div>
			<div class="tabitem" >
				<router-link :class="{cur:active=='Rating'}" to="/merchant/Rating">评价</router-link>
			</div>
			<div class="tabitem">
				<router-link :class="{cur:active=='info'}" to="/merchant/info">商家</router-link>
			</div>
		</div>
		<router-view/>
	</div>
</template>

<script>
import MerchantHeader from "../../components/MerchantHeader.vue";
	export default {
    data() {
        return {
			active:this.$route.path.split("/").pop()
		}
    },
    methods: {},
    async mounted() {
        await this.$store.dispatch("initShopDetails", { shopId: this.$route.query.merchantId });
    },
	watch:{
		$route(newValue){
			this.active=newValue.path.split("/").pop()
		}
	},	
    components: { MerchantHeader }
}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#merchant {
	height: 100%;
	.tabs {
		display: flex;
		align-items: center;
		padding: 10px;
		.tabitem {
			flex: 1;
			text-align: center;
			a {
				padding-bottom: .31em;
				border-bottom: 2px solid transparent;
				&.cur {
					border-color: $themeColor;
				}
			}
		}
	}
}
</style>